<template>
  <div class="flex flex-col mb-2 mt-2">
    <div class="title-bar flex items-center mb-4 mt-4" v-if="title">
      <span class="font-semibold text-lg text-gray-700">{{ title }}</span>
      <n-button quaternary class="ml-auto text-dark-200">查看更多</n-button>
    </div>
    <n-grid x-gap="16" y-gap="12" :cols="cols">
      <n-gi v-for="(item, index) in data" :key="index">
        <n-card
          class="shadow-md cursor-pointer"
          @click="$router.push('/?id=' + item.id)"
          footer-style="padding:0"
        >
          <template #cover>
            <img :src="item.cover || item.src" class="w-[100%] h-[100px]" />
          </template>
          <div class="text-center pt-4">{{ item.title || item.name }}</div>
          <div class="price" v-if="showPrice">
            <Price
              :price="item.price"
              prefix="￥"
              :className="`text-red-600 text-lg`"
            />
            <Price
              :price="item.t_price"
              prefix="￥"
              :className="`text-sm text-gray-400 line-through ml-2`"
            />
          </div>
          <template #footer v-if="showFooter">
            <div class="tfooter bg-yellow-500 text-white border-b text-center">
              {{ item.updated_time }}
            </div>
          </template>
        </n-card>
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup>
import { NGrid, NGi, NCard, NButton } from "naive-ui";
defineProps({
  title: {
    type: String,
    default: "",
  },
  cols: {
    type: Number,
    default: 3,
  },
  showPrice: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: [],
  },
});
</script>
